<template>
  <view class="survey-container">

    <!-- 页面内容 -->
    <scroll-view class="content" scroll-y>
      <!-- 头部横幅 -->
      <view class="header-banner">
        <image src="https://picsum.photos/id/3/750/200" mode="widthFix" class="banner-image" alt="调查问卷活动横幅"></image>
        <view class="banner-text">
          <view class="banner-title">参与调查，赢取好礼</view>
          <view class="banner-subtitle">完成任意3份问卷即可参与抽奖</view>
        </view>
      </view>

      <!-- 分类入口 -->
      <view class="categories-section">
        <view class="section-title">问卷分类</view>

        <!-- 分类网格 -->
        <view class="categories-grid">
          <view class="category-card" v-for="(category, index) in categories" :key="index"
            @click="enterCategory(category.param)" :style="{ backgroundColor: category.bgColor }">
            <uni-icons :type="category.icon" size="36" :color="category.iconColor" class="category-icon"></uni-icons>
            <view class="category-name">{{ category.name }}</view>
            <view class="survey-count">{{ category.count }}份问卷</view>
          </view>
        </view>
      </view>

      <!-- 热门推荐 -->
      <view class="popular-section">
        <view class="section-title">热门推荐</view>

        <view class="survey-list">
          <view class="survey-item" v-for="(survey, index) in popularSurveys" :key="index"
            @click="startSurvey(survey.id)">
            <view class="survey-info">
              <view class="survey-title">{{ survey.title }}</view>
              <view class="survey-meta">
                <view class="survey-category">{{ survey.category }}</view>
                <view class="survey-participants">
                  <uni-icons type="people" size="14" color="#999"></uni-icons>
                  <text>{{ survey.participants }}人参与</text>
                </view>
              </view>
              <view class="survey-reward" v-if="survey.reward">
                <uni-icons type="gift" size="14" color="#ff9900"></uni-icons>
                <text>{{ survey.reward }}</text>
              </view>
            </view>
            <view class="survey-arrow">
              <uni-icons type="right" size="20" color="#ccc"></uni-icons>
            </view>
          </view>
        </view>
      </view>

      <!-- 最新上线 -->
      <view class="latest-section">
        <view class="section-title">最新上线</view>

        <view class="survey-list">
          <view class="survey-item" v-for="(survey, index) in latestSurveys" :key="index"
            @click="startSurvey(survey.id)">
            <view class="survey-info">
              <view class="survey-title">{{ survey.title }}</view>
              <view class="survey-meta">
                <view class="survey-category">{{ survey.category }}</view>
                <view class="survey-participants">
                  <uni-icons type="people" size="14" color="#999"></uni-icons>
                  <text>{{ survey.participants }}人参与</text>
                </view>
              </view>
              <view class="survey-reward" v-if="survey.reward">
                <uni-icons type="gift" size="14" color="#ff9900"></uni-icons>
                <text>{{ survey.reward }}</text>
              </view>
            </view>
            <view class="survey-arrow">
              <uni-icons type="right" size="20" color="#ccc"></uni-icons>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部留白 -->
      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  onload() {
    // this.fetchSurveyCounts();
  },
  mounted(){
    this.getCategories()

  },
  data() {
    return {
      // 问卷分类数据
      categories: [
        {
          id: 1,
          name: "心理测评",
          icon: "color-filled",
          iconColor: "#ff9900",
          bgColor: "#fff8e6",
          count: 0,
          param: 'cat_079f931e'
        },
        {
          id: 2,
          name: "AI测评",
          icon: "auth",
          iconColor: "#00aaee",
          bgColor: "#e6f7ff",
          count: 0,
          param: 'cat_bf51d304926049e7'
        },
        {
          id: 3,
          name: "市场调研",
          icon: "search",
          iconColor: "#7cb305",
          bgColor: "#f6ffed",
          count: 0
        },
        {
          id: 4,
          name: "活动评价",
          icon: "calendar",
          iconColor: "#ff4d4f",
          bgColor: "#fff2f0",
          count: 0
        },
        {
          id: 5,
          name: "服务满意度",
          icon: "hand-up-filled",
          iconColor: "#722ed1",
          bgColor: "#f9f0ff",
          count: 0
        },
        {
          id: 6,
          name: "意见征集",
          icon: "chat",
          iconColor: "#fa8c16",
          bgColor: "#fff7e6",
          count: 0
        }
      ],

      // 热门推荐问卷
      popularSurveys: [
        {
          id: 101,
          title: "小程序功能使用反馈调查",
          category: "产品反馈",
          participants: 1254,
          reward: "10积分"
        },
        {
          id: 102,
          title: "用户体验优化调查问卷",
          category: "用户体验",
          participants: 896,
          reward: "20积分"
        },
        {
          id: 103,
          title: "新功能需求收集问卷",
          category: "意见征集",
          participants: 752,
          reward: "抽奖机会"
        }
      ],

      // 最新上线问卷
      latestSurveys: [
        {
          id: 201,
          title: "6月活动满意度调查",
          category: "活动评价",
          participants: 128,
          reward: "5积分"
        },
        {
          id: 202,
          title: "服务质量提升调研",
          category: "服务满意度",
          participants: 95,
          reward: ""
        }
      ]
    };
  },
  methods: {
    //获取分类信息api
    getCategories() {
      uni.request({
        url: 'https://wxapi.xiaoyiwl.cn/wx_questionnare/get_questionnare_category.php', // 实际接口URL
        method: 'GET', // 接口请求方式（GET/POST，根据后端定义调整）
        header: {
          'Content-Type': 'application/json', // 常规请求头，若需Token需额外添加
          // 'Authorization': 'Bearer ' + wx.getStorageSync('token') // 如有登录态，添加Token
        },
        success: (res) => {
          // 2. 先判断接口请求成功（参考后端返回的 success 字段）
          if (res.data && res.data.success) {
            const apiDataList = res.data.data; // 接口返回的分类数组
            if (!apiDataList || apiDataList.length === 0) {
              uni.showToast({ title: '暂无分类数据', icon: 'none' });
              return;
            }

            // 3. 关键：将接口数据映射为前端 categories 格式
   
            
            // 3. 核心：映射为 categories 数组
            this.categories = apiDataList.map((item, index) => {
              return {
                id: index + 1, // 用索引+1生成id（如第1项id=1，第2项id=2...）
                name: item.name, // 直接取接口name
                icon: item.icon, // 直接取接口icon
                iconColor: item.iconColor, // 直接取接口iconColor
                bgColor: item.bgColor, // 直接取接口bgColor
                count: item.survey_count || 0, // 固定默认值0
                param: item.category_id // 接口category_id映射到param
              };
            });

            // 4. 更新页面 data 中的 categories，视图会自动渲染
            // this.setData({
            //   categories: copyData
            // });

          } else {
            // 接口返回 success: false 时，提示错误信息
            uni.showToast({
              title: res.data.message || '获取分类失败',
              icon: 'none',
              duration: 1500
            });
          }
        },
        fail: (err) => {
          // 网络请求失败（如断网、接口不存在）
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none',
            duration: 1500
          });
          console.error('接口请求失败：', err); // 打印错误日志，便于调试
        }
      });
    },
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },

    // 显示搜索
    showSearch() {
      uni.showToast({
        title: "搜索功能待实现",
        icon: "none"
      });
    },

    // 进入分类
    enterCategory(categoryId) {
      uni.navigateTo({
        // 接受id， 根据id 进入不同的分类，目前写死
        url: `./creativitySurveyList?categoryId=${categoryId}`
      });
    },

    // 开始问卷
    startSurvey(surveyId) {
      uni.navigateTo({
        url: `/pages/survey/detail?id=${surveyId}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.survey-container {
  background-color: #f5f5f7;
  min-height: 100vh;
}

// 导航栏样式
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;

  .navbar-left,
  .navbar-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-title {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    flex: 1;
    text-align: center;
  }
}

// 内容区域
.content {
  padding-bottom: 20px;
}

// 头部横幅
.header-banner {
  position: relative;
  margin: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

  .banner-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
  }

  .banner-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;

    .banner-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .banner-subtitle {
      font-size: 14px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }
}

// 分类区域
.categories-section {
  background-color: #fff;
  margin: 0 16px 16px;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-left: 4px;
  }

  .categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    .category-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 8px;
      border-radius: 10px;
      transition: transform 0.2s ease;

      &:active {
        transform: scale(0.96);
      }

      .category-icon {
        margin-bottom: 8px;
      }

      .category-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }

      .survey-count {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

// 热门推荐和最新上线
.popular-section,
.latest-section {
  background-color: #fff;
  margin: 0 16px 16px;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-left: 4px;
  }

  .survey-list {
    .survey-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 4px;
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #f9f9f9;
      }

      .survey-info {
        flex: 1;

        .survey-title {
          font-size: 15px;
          color: #333;
          margin-bottom: 8px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .survey-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: #999;
          margin-bottom: 4px;

          .survey-category {
            background-color: #f5f5f5;
            padding: 2px 8px;
            border-radius: 12px;
          }

          .survey-participants {
            display: flex;
            align-items: center;

            uni-icons {
              margin-right: 2px;
            }
          }
        }

        .survey-reward {
          font-size: 12px;
          color: #ff9900;
          display: flex;
          align-items: center;

          uni-icons {
            margin-right: 2px;
          }
        }
      }
    }
  }
}

// 底部留白
.bottom-space {
  height: 20px;
}
</style>
